<%--
  Created by IntelliJ IDEA.
  User: 施明
  Date: 2019/5/21
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="${path}/layuiadmin/style/admin.css" media="all">


    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">


</head>

<body>
<div class="layui-form-item">

    <div class="layui-inline">

        <!-- 搜索框 -->
        <div class="demoTable">
            姓名：
            <div class="layui-inline">
                <input class="layui-input" name="empname" id="demoReload"
                       autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
</div>

<!-- 添加员工信息的表单 -->
<div id="addemployee" style="display: none">
    <!-- 这里给一个弹出表单 -->
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="empname" id="empname" lay-verify="title"
                       autocomplete="off" placeholder="请输入姓名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="emppassword" id="emppassword" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="empphone" id="empphone" lay-verify="title"
                       autocomplete="off" placeholder="请输入手机号"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="empsex" id="empsex-1" value="男" title="男" checked="">
                <input type="radio" name="empsex" id="empsex-2" value="女" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入职时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="empentryday" placeholder="yyyy-MM-dd" name="empentryday">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生日时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="empbirthday" placeholder="yyyy-MM-dd" name="empbirthday">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="empstatus" id="empstatus" lay-verify="title"
                       autocomplete="off" placeholder="默认状态"
                       class="layui-input" value="0" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn btn-update" type="button" lay-submit=""
                        lay-filter="demo1">保存
                </button>
            </div>
        </div>
    </form>
</div>

<!-- 编辑信息 -->
<div id="editemployee" style="display:none">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="text" name="empid" id="empid1" lay-verify="title"
                       autocomplete="off" readonly
                       class="layui-input">
            </div>
        </div>
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="empname" id="empname1" lay-verify="title"
                   autocomplete="off" placeholder="请输入姓名"
                   class="layui-input">
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="empphone" id="empphone1" lay-verify="title"
                       autocomplete="off" placeholder="请输入手机号"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" id="empsex1">
                <input type="radio" name="empsex" id="empsex11" value="男" title="男" checked="">
                <input type="radio" name="empsex" id="empsex12" value="女" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入职时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="empentryday1" placeholder="yyyy-MM-dd"
                           name="empentryday">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生日时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="empbirthday1" placeholder="yyyy-MM-dd"
                           name="empbirthday">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block" id="empstatus1">
                <input type="radio" name="empstatus" id="empstatus11" value="0" title="在职" checked="">
                <input type="radio" name="empstatus" id="empstatus12" value="1" title="离职">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn btn-update" type="button" lay-submit=""
                        lay-filter="demo2">保存
                </button>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加员工</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="add">添加员工</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="${path}/layuiadmin/layui/layui.js"></script>

<script>

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            //  ,url:'/test/table/demo1.json'
            ,
            url: 'listEmployee' //数据接口
            ,
            toolbar: '#toolbarDemo',
            title: '员工数据表',
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'empid', width: 90, title: '员工ID', sort: true}
                    , {field: 'empname', title: '姓名', minWidth: 100}
                    , {field: 'empphone', width: 120, title: '电话'}
                    , {field: 'empsex', width: 80, title: '性别'}
                    , {
                    field: 'empentryday', title: '入职时间', temlet: function (d) {
                        return util.toDateString(d.empentryday * 1000, "yyyy-MM-dd");
                    }
                }
                    , {
                    field: 'empbirthday',
                    title: '员工生日',
                    temlet: "<div>{{layui.util.toDateString(d.empbirthday,'yyyy-MM-dd')}}</div>"
                }

                    , {
                    field: 'emppstatus', title: '状态', templet: function (res) {
                        return res.empstatus == 0 ? "在职" : "离职";
                    }
                }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ],
            page: true,
            id: 'testReload'
        });

        //表格数据重载，模糊查询
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {
                        //这里传值给servlet
                        content: demoReload.val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    var data = checkStatus.data;
                    layer.open({
                        type: 1,
                        content: $("#addemployee"),//这里弹出的内容是div的id为addemployee
                        title: '添加员工信息',
                        area: ['700px', '500px']
                    });
                    break;

            }
            ;
        });

        //ajax添加提交事件,  此处搭配添加操作弹出层
        layui.form.on('submit(demo1)', function (data) {

            $.ajax({
                type: "post",
                url: "addEmployee",
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (cm) {
                    layer.msg(cm.msg, {
                        time: 1000,
                    }, function () {
                        if (cm.msg == "添加成功") {
                            layer.closeAll();
                            location.reload('testReload');
                        }
                    });

                }

            });

            //return false;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: "delectEmployee?empid=" + data.empid,
                        dataType: 'json',
                        success: function (data) {
                            console.log(data.msg);
                            if (data.msg == "删除成功")
                                layer.msg('已删除!', {icon: 1, time: 2000});
                            window.location.reload();
                        },
                        error: function (data) {
                            console.log(data.msg);
                        },
                    });
                });
            } else if (obj.event === 'edit') {
                //给表单元素赋值
                $("#empid1").attr("value", data.empid);
                $("#empname1").attr("value", data.empname);
                $("#empphone1").attr("value", data.empphone);
                $("#empsex1").attr("value", data.empsex);
                $("#empentryday1").attr("value", data.empentryday);
                $("#empbirthday1").attr("value", data.empbirthday);

                if (data.empsex == "女") {//设置性别,针对checked属性：[如果弹出层open()的 content:$("#edituser")没有.html,则用prop]
                    //[如果弹出层open()的 content:$("#edituser").html,则用attr]
                    $("input[name='empsex'][value='女']").prop("checked", true);
                    $("input[name='empsex'][value='男']").prop("checked", false);
                } else {
                    $("input[name='empsex'][value='男']").prop("checked", true);
                    $("input[name='empsex'][value='女']").prop("checked", false);
                }

                layui.form.render('radio');


                if (data.empstatusl == 0) {
                    $("#empstatus11").attr("selected", true);
                    $("#empstatus12").attr("selected", false);
                } else {
                    $("#empstatus11").attr("selected", false);
                    $("#empstatus12").attr("selected", true);
                }


                //添加一个弹出层
                var index1 = layer.open({
                    type: 1,
                    content: $("#editemployee"),//这里弹出的内容是div的id为edituser
                    title: '修改员工信息',
                    area: ['700px', '500px']


                });

                layui.form.render();//这个是表单的render，用于处理单选框、按钮、多选框不能被选中的问题
            }
        });

        //ajax修改提交,  此处搭配监听行工具事件  的修改操作
        layui.form.on('submit(demo2)', function (data4) {
            //这里输出看下json对象

            /* var d=data4.field;
             console.log(JSON.stringify(data4.field));

             console.log(data4.field.empid);
             console.log(data4.field.empname);
             console.log(data4.field.empphone);
             console.log(data4.field.empsex);
             console.log(data4.field.empbirthday);*/
            var data = {
                empid: data4.field.empid,
                empname: data4.field.empname,
                empphone: data4.field.empphone,
                empsex: data4.field.empsex,
                empentryday: data4.field.empentryday,
                empbirthday: data4.field.empbirthday,
                empstatus: data4.field.empstatus
            };
            $.ajax({
                type: "post",
                url: "updateEmployee",
                data: JSON.stringify(data),
                contentType: "application/json;charset=UTF-8",
                success: function (cm) {
                    layer.msg(cm.msg, {
                        time: 1000,
                    }, function () {
                        if (cm.msg == "修改成功") {

                            layer.msg('修改成功', {
                                icon: 1, time: 2000
                            }, function () {
                                layer.closeAll();
                                location.reload('testReload');
                            });

                        } else {
                            layer.msg('修改失败', {
                                icon: 1,
                                time: 1500
                            });
                        }
                    });
                }

            });

            return false;
        });


    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#empentryday1'
        });
        //常规用法
        laydate.render({
            elem: '#empbirthday1'
        });
        //常规用法
        laydate.render({
            elem: '#empentryday'
        });
        //常规用法
        laydate.render({
            elem: '#empbirthday'
        });

    });
</script>

</body>

</html>
